---
// Footer Section Component
---

<!-- Footer Section -->
<footer
  class="footer-section"
  role="contentinfo"
  aria-labelledby="footer-heading"
>
  <!-- CTA Section -->
  <div class="footer-cta-section">
    <div class="footer-container">
      <div class="logo-shape">
        <svg
          viewBox="0 0 400 400"
          xmlns="http://www.w3.org/2000/svg"
          fill="#151134"
          stroke="#fff"
          stroke-width="2px"
        >
          <circle cx="200" cy="200" r="200" fill="#fff" stroke-width="0"
          ></circle>
          <circle cx="200" cy="200" r="198" stroke-width="0"></circle>
          <circle cx="180" cy="180" r="130"></circle>
          <circle cx="215" cy="180" r="70"></circle>
          <circle cx="150" cy="94" r="38"></circle>
          <circle cx="100" cy="195" r="40"></circle>
          <circle cx="165" cy="275" r="30"></circle>
          <circle cx="250" cy="265" r="20"></circle>
          <circle cx="57" cy="270" r="20"></circle>
          <circle cx="215" cy="345" r="36"></circle>
          <circle cx="310" cy="290" r="36"></circle>
          <circle cx="345" cy="195" r="30"></circle>
          <circle cx="321" cy="107" r="25"></circle>
          <circle cx="260" cy="50" r="20"></circle>
          <circle cx="120" cy="330" r="25"></circle>
        </svg>
      </div>

      <h2 id="footer-heading" class="footer-cta-title">
        Ready to get started?
      </h2>
      <p class="footer-cta-description">Build a better app with Reatom</p>

      <!-- Repeat CTA Buttons from Hero -->
      <div class="footer-cta-container">
        <a
          href="/start/base"
          class="footer-cta-button footer-cta-primary"
          aria-label="Get started with Reatom documentation"
        >
          <span>Get Started</span>
          <svg
            class="footer-cta-icon"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4.16667 10H15.8333M15.8333 10L10.8333 5M15.8333 10L10.8333 15"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </a>

        <a
          href="https://stackblitz.com/github/reatom/reatom/tree/v1000/examples/react-search"
          target="_blank"
          rel="noopener noreferrer"
          class="footer-cta-button footer-cta-secondary"
          aria-label="Try Reatom on StackBlitz"
        >
          <span>Try Now</span>
          <svg
            class="footer-cta-icon"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.8333 2.5L3.33333 11.6667H10L9.16667 17.5L16.6667 8.33333H10L10.8333 2.5Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Main Footer Content -->
  <div class="footer-main">
    <div class="footer-container">
      <div class="footer-grid">
        <!-- Documentation Section -->
        <div class="footer-section-group">
          <h3 class="footer-section-title">Documentation</h3>
          <ul class="footer-links">
            <li>
              <a href="/references" class="footer-link">
                <span>Complete Documentation</span>
                <span class="footer-link-description"
                  >Guides and API reference</span
                >
              </a>
            </li>
            <li>
              <a href="/start/base" class="footer-link">
                <span>Getting Started</span>
                <span class="footer-link-description">Quick start guide</span>
              </a>
            </li>
            <li>
              <a
                href="https://github.com/reatom/reatom/tree/v1000/examples"
                target="_blank"
                rel="noopener noreferrer"
                class="footer-link"
              >
                <span>Examples</span>
                <span class="footer-link-description">Real-world use cases</span
                >
              </a>
            </li>
          </ul>
        </div>

        <!-- Community Section -->
        <div class="footer-section-group">
          <h3 class="footer-section-title">Community</h3>
          <ul class="footer-links">
            <li>
              <a
                href="https://discord.gg/EPAKK5SNFh"
                target="_blank"
                rel="noopener noreferrer"
                class="footer-link"
                aria-label="Join Reatom Discord community"
              >
                <svg
                  class="footer-link-icon"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
                  ></path>
                </svg>
                <span>Discord Community</span>
                <span class="footer-link-description">Chat with developers</span
                >
              </a>
            </li>
            <li>
              <a
                href="https://github.com/reatom/reatom/issues"
                target="_blank"
                rel="noopener noreferrer"
                class="footer-link"
                aria-label="Report issues on GitHub"
              >
                <svg
                  class="footer-link-icon"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
                  ></path>
                </svg>
                <span>Issue Tracker</span>
                <span class="footer-link-description"
                  >Report bugs & requests</span
                >
              </a>
            </li>
            <li>
              <a
                href="https://t.me/reatom_ru"
                target="_blank"
                rel="noopener noreferrer"
                class="footer-link"
                aria-label="Join Reatom Telegram channel"
              >
                <svg
                  class="footer-link-icon"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"
                  ></path>
                </svg>
                <span>Telegram</span>
                <span class="footer-link-description">Russian community</span>
              </a>
            </li>
          </ul>
        </div>

        <!-- Social & Links Section -->
        <div class="footer-section-group">
          <h3 class="footer-section-title">Connect</h3>
          <ul class="footer-links">
            <li>
              <a
                href="https://x.com/ReatomJS"
                target="_blank"
                rel="noopener noreferrer"
                class="footer-link"
                aria-label="Follow Reatom on X (Twitter)"
              >
                <svg
                  class="footer-link-icon"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                  ></path>
                </svg>
                <span>X (Twitter)</span>
                <span class="footer-link-description">Latest updates</span>
              </a>
            </li>
            <li>
              <a
                href="https://github.com/reatom/reatom"
                target="_blank"
                rel="noopener noreferrer"
                class="footer-link"
                aria-label="View Reatom source code on GitHub"
              >
                <svg
                  class="footer-link-icon"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
                  ></path>
                </svg>
                <span>GitHub</span>
                <span class="footer-link-description">Source code</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.npmjs.com/package/@reatom/core"
                target="_blank"
                rel="noopener noreferrer"
                class="footer-link"
                aria-label="View Reatom on NPM"
              >
                <svg
                  class="footer-link-icon"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
                  ></path>
                </svg>
                <span>NPM</span>
                <span class="footer-link-description">Package registry</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer Bottom -->
  <div class="footer-bottom">
    <div class="footer-container">
      <div class="footer-bottom-content">
        <p class="footer-copyright">
          © 2025 Reatom. Built with ❤️ by the open source community.
        </p>
        <div class="footer-bottom-links">
          <a
            href="https://github.com/reatom/reatom/blob/main/LICENSE.md"
            target="_blank"
            rel="noopener noreferrer"
            class="footer-bottom-link"
          >
            MIT License
          </a>
          <span class="footer-separator">•</span>
          <a
            href="https://github.com/reatom/reatom"
            target="_blank"
            rel="noopener noreferrer"
            class="footer-bottom-link"
          >
            Open Source
          </a>
        </div>
      </div>
    </div>
  </div>
</footer>

<style>
  /* Footer Section */
  .footer-section {
    background: var(--bg-primary);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--border-color) 50%,
      transparent 100%
    );
  }

  .footer-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* CTA Section */
  .footer-cta-section {
    padding: 4rem 0;
    text-align: center;
    position: relative;
  }

  .footer-cta-section::before {
    content: " ";
    position: absolute;
    inset: 0;
    --top-color: #222328;
    background-image: 
      linear-gradient(to bottom, transparent 10rem, var(--bg-primary) 100vh 100%),
      url(/assets/noise.svg), 
      linear-gradient(to bottom, var(--top-color), transparent);
    opacity: 0.2;
  }

  html[data-theme="light"] .footer-cta-section::before {
    opacity: 1;
    --top-color: #cbd0ee;
  }

  .logo-shape {
    animation: rotate 600s linear infinite;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
    --accent: color-mix(in srgb, var(--accent-primary), transparent 60%)
  }

  .logo-shape svg {
    width: 100%;
    height: 100%;
  }

  .logo-shape svg circle {
    fill: #18191b;
    stroke: var(--accent);
    transition: fill 0.3s ease, stroke 0.3s ease;
  }

  html[data-theme="light"] .logo-shape svg circle {
    fill: #eef0f9;
  }

  .logo-shape svg circle:first-child {
    fill: var(--accent);
    transition: fill 0.3s ease;
  }

  .footer-cta-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--accent-primary);
    transition: background 0.3s ease;
  }

  .footer-cta-description {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: 2.5rem;
    opacity: 0.9;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }

  /* Footer CTA Buttons */
  .footer-cta-container {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
  }

  .footer-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }

  .footer-cta-button:hover::before {
    transform: translateX(100%);
  }

  .footer-cta-primary {
    background: var(--accent-gradient);
    color: var(--bg-primary);
    box-shadow: 0 8px 32px var(--shadow-color);
    transition: all 0.3s ease;
  }

  .footer-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px var(--shadow-color);
  }

  .footer-cta-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .footer-cta-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--shadow-color);
  }

  .footer-cta-icon {
    transition: transform 0.3s ease;
  }

  .footer-cta-button:hover .footer-cta-icon {
    transform: translateX(4px);
  }

  /* Main Footer Content */
  .footer-main {
    padding: 3rem 0;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
  }

  .footer-section-group {
    display: flex;
    flex-direction: column;
  }

  .footer-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--accent-primary);
    position: relative;
    transition: color 0.3s ease;
  }

  .footer-section-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 1px;
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-links li {
    margin-left: -0.5rem;
  }

  .footer-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }

  .footer-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  .footer-link:hover::before {
    opacity: 1;
  }

  .footer-link:hover {
    color: var(--accent-primary);
    transform: translateX(4px);
  }

  .footer-link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }

  .footer-link:hover .footer-link-icon {
    color: var(--accent-primary);
  }

  .footer-link > span:first-of-type {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
  }

  .footer-link-description {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
    margin-left: auto;
    text-align: end;
  }

  /* Footer Bottom */
  .footer-bottom {
    border-top: 1px solid var(--card-border);
    padding: 2rem 0;
    transition: border-color 0.3s ease;
  }

  .footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .footer-copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    transition: color 0.3s ease;
  }

  .footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .footer-bottom-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
  }

  .footer-bottom-link:hover {
    color: var(--accent-primary);
  }

  .footer-separator {
    color: var(--text-muted);
    opacity: 0.5;
  }

  /* Light theme specific adjustments */
  html[data-theme='light'] .footer-section {
    background: var(--bg-primary);
  }

  html[data-theme='light'] .footer-cta-primary {
    color: #fdfdff;
    font-weight: 700;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .footer-cta-section {
      padding: 3rem 0;
    }

    .footer-cta-container {
      flex-direction: column;
      gap: 1rem;
    }

    .footer-cta-button {
      max-width: 300px;
      justify-content: center;
    }

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .footer-bottom-content {
      flex-direction: column;
      text-align: center;
    }

    .logo-shape {
      width: 15rem;
      height: 15rem;
    }
  }

  @media (max-width: 480px) {
    .footer-container {
      padding: 0 1rem;
    }

    .footer-cta-section {
      padding: 2rem 0;
    }

    .footer-main {
      padding: 2rem 0;
    }

    .footer-bottom {
      padding: 1.5rem 0;
    }
  }

  /* Accessibility */
  .footer-link:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  .footer-cta-button:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  /* High contrast mode */
  @media (prefers-contrast: high) {
    .footer-section {
      background: var(--bg-primary);
    }

    .footer-cta-title {
      background: none;
    }

    .footer-link,
    .footer-copyright,
    .footer-bottom-link {
      color: var(--text-primary);
    }

    .footer-link:hover {
      color: var(--accent-primary);
    }
  }
</style>
